<template>
  <div style="background-color: #eeeeee;height:932px">
    <van-nav-bar
        title="退回押金"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <br>
<!--    退款进度-->
    <van-steps :active="active">
      <van-step>发起</van-step>
      <van-step>审核中</van-step>
      <van-step>退款完成</van-step>
    </van-steps>
    <br>
<!--    中间图片插入-->
    <van-image
        width="570"
        height="269"
        src="https://x0.ifengimg.com/res/2021/C90B0BAF38D3A8FBB2D37960CCD23AC426A01BFD_size47_w608_h355.jpeg"
    />
<!--    描述-->
    <p style="font-size: 20px">请将租借物品尽快归还至线下站点，我们将会尽快进行审核退款。</p>
<!--    按钮-->
    <van-button type="default"  block round @click="onClickdodo" style="margin-top: 300px">确认</van-button>
  </div>
</template>
<script setup>
import {useRouter} from "vue-router";
const route = useRouter()
import { ref } from 'vue';
const onClickLeft = () => {
  // 返回上一页
  route.push('/deposit')
}

// 退款进度
// 判断押金是否为空 为空则退款成功
const active = ref(1);
// 假设押金变量
const deposit = ref(null); // 假设押金初始值为空

// 监听押金变化，更新退款进度
watch(deposit, (newDeposit) => {
  if (!newDeposit) {
    active.value = 3; // 押金为空，退款完成
  } else {
    active.value = 1; // 押金不为空，退款未完成
  }
});
// 返回按钮
const onClickdodo=()=>{
  route.push('/deposit')
}

</script>